import React from 'react'
import {inject, observer} from 'mobx-react';
import {withRouter} from 'react-router-dom';
import {SearchPage,ListViewPage} from 'weaver-mobile-page';
import {SearchBar,Tools} from 'weaver-mobile';
import {toJS} from 'mobx';

const getLabel = Tools.getLabel;

@withRouter
@inject('netdiskStore')
@observer
class MyShareObjPage extends React.Component {
    componentDidMount(){
        const {netdiskStore,store} = this.props;
        store.getShareObjList();
        netdiskStore.isOpenFile = true;
    }
    componentWillUnmount(){
        const {netdiskStore,store} = this.props;
        netdiskStore.isOpenFile = false;
        //退出分享对象页面时清除数据
        store.clearShareObjData();
    }
    handleFocus = () => {
        const {netdiskStore} = this.props,{listStore} = netdiskStore,{myShareSearchPage} = listStore;
        this.props.history.push(myShareSearchPage.path);
        listStore.setSearchHistory()
    }
    getTemplate = (template) => {
        const newTemp = {
          ...template,
          default: [{
            key: 'col_1',
            render: (rowData) => {
              return (
                <div key={rowData.id} className="netdisk-share-user-item">
                    <div className="user-avatar">
                        <img src={rowData.icon || "/messager/images/icon_m_wev8.jpg"} alt="" className="user-avatar-img"/>
                    </div>
                    <div className="user-item-info-left">
                        <span className="user-item-username">{rowData.sharername}</span>
                        {
                            rowData.type === 'user'
                            ? <span className="user-item-sub">{(rowData.department || '') + (rowData.department && rowData.company ? '/' : '') + (rowData.company || '')}</span>
                            :<span className="user-item-sub">{rowData.number + getLabel(33423,'人')}</span>
                        }
                        <span className="user-item-date">{getLabel(391245,'分享时间')}：{rowData.sharetime}</span>
                    </div>
                </div>
              );
            },
          }],
        };
        return newTemp;
      }
      cancleChoose = () =>{
        const {store} = this.props,{shareObjLVPStore} = store;
        shareObjLVPStore.selectNone();
        store.shareObjChooseIds = [];
      }
      chooseAllObj = () =>{
        const {store} = this.props,{shareObjLVPStore} = store;
        let alldata = toJS(shareObjLVPStore).data;
        if(shareObjLVPStore.isSelectedAll){
            shareObjLVPStore.selectNone();
            store.shareObjChooseIds = [];
        }else{
            shareObjLVPStore.selectAll();
            store.chooseAllShareObj(alldata);
        }
      }
      onTouchRow = (rowData) =>{
        const {store} = this.props;
        store.chooseShareObj(rowData);
      }
    render(){
        const {netdiskStore,store} = this.props,{listStore} = netdiskStore,{myShareSearchPage} = listStore;
        const {shareObjLVPStore,shareObjChooseIds} = store;
        return(
            <div className="netdisk-myshare-userlist-bg">
                <div className="netdisk-myshare-header-search">
                    <SearchBar
                        className="search-select"
                        placeholder={getLabel(32933, "请输入关键字")}
                        onFocus={this.handleFocus}
                        value={listStore.searchKey.keyword ? listStore.searchKey.keyword : ''}
                    />
                    <SearchPage
                        store={myShareSearchPage}
                        type={1}
                        nameKey="name"
                        rowKey="key"
                        onSubmit={(v) => {       
                            let keyword = typeof(v) === 'string' ? v : v.name
                            //去除所有空格
                            if(keyword&&keyword.replace(/\s+/g,"")!==""){
                                listStore.addHistory(keyword)
                            }
                            listStore.doSearchByKeyword(keyword)
                        }}
                        onClear={()=>{
                            listStore.clearSearchHistory(); 
                        }}
                    />
                    <div className="netdisk-myshare-header-div">
                        <span className="myshare-header-div-cancle" onClick={() => this.cancleChoose()}>{getLabel(31129,'取消')}</span>
                        <span className="myshare-header-div-choosed">{getLabel(31503, '已选择') + shareObjChooseIds.length + getLabel(24683, '条记录')}</span>
                        <span className="myshare-header-div-chooseall" onClick={() => this.chooseAllObj()}>{shareObjLVPStore.isSelectedAll?getLabel(387379,'取消全选'):getLabel(556,'全选')}</span>
                        <span>{}</span>
                    </div>
                </div>
                <div className="netdisk-myshare-list-div">
                    <ListViewPage.Normal
                        className="netdisk-myshare-list"
                        getDataCustom={true}
                        showCheck={true}
                        multipleCheck={true}
                        store={shareObjLVPStore} 
                        onRowClick={(rowData) => {
                            this.onTouchRow(rowData);
                        }}
                        customHeight="100%"
                        getTemplate={this.getTemplate}
                        // onEndReached={store.getNextPageWithCategory}
                        onRefresh={store.getShareObjList}
                    />
                </div>
                <div className="netdisk-myshare-footer">
                    <div className="netdisk-myshare-delete" onClick={()=>store.deleteShareObj()}>
                        <span className="netdisk-myshare-span">{getLabel(91, '删除')}</span>
                    </div>
                </div>
                
            </div>
        )
    }
}

export default MyShareObjPage;